<template>
	<div class="wy-main supply-longDistance">
		<a-form :form="form" @submit="handleSubmit">
			<div class="route">
				<p class="route_text">长途整车业务是物流云为整车货物调配优质返程车辆的服务，根据货物重量和体积及车型需求，快速调配优质低价返程车辆，让企业发货又快又省钱！</p>
				<div class="route_choice">
					<p><b>线路信息</b></p>
					<a-row>
						<a-col :span="12" class="choice-left">
							<div class="distance" v-if="distance" style="left: 67%">
								<div class="border-top"></div>
								约<span style="color: red;">{{distance}}</span>公里
								<div class="border-bottom"></div>
							</div>
							<a-form-item label="出发地" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
								<a-input readOnly style="width: 280px;" @click="departureShowMap" v-decorator="[ 'fromCity', {rules: [{ required: true, message: '请选择出发地!' }]}]"
								 placeholder='请选择出发地' ref="userNameInput">
									<a-icon type="environment" slot="suffix" style="color: #15837A;" />
								</a-input>
							</a-form-item>
							<a-form-item label="到达地" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
								<a-input readOnly style="width: 280px;" @click="destinationShowMap" class="wy-input" v-decorator="[ 'toCity', {rules: [{ required: true, message: '请选择出发地!' }]}]"
								 placeholder='请选择到达地'>
									<a-icon type="environment" slot="suffix" style="color: #FF2F47;" />
								</a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="街道/门牌号" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
								<a-input style="width: 280px;" v-decorator="['fromStreet']" placeholder="详细街道地址（可不填）" @click="getdepartureStreet" />
							</a-form-item>
							<a-form-item label="街道/门牌号" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
								<a-input style="width: 280px;" v-decorator="['toStreet']" placeholder="详细街道地址（可不填）" @click="getdestinationStreet" />
							</a-form-item>
						</a-col>
					</a-row>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 20px; " />
				<div class="route_choice">
					<p><b>货物信息</b></p>
					<a-form-item label="货物图片" :label-col="{ span: 2 }" :wrapper-col="{ span: 16 }" class="upzjimg">
							<a-upload v-decorator="['upload', {rules: [{ required: true, message: '请选择货物图片!' }]}]" name="file" listType="picture-card" class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
								<div class="img_zz" v-if="vehIng_one">
									<div class="img_zz_text">
										<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
									</div>
									<div class="img_zz_d"></div>
								</div>
								<img v-if="vehIng_one" :src="vehIng_one" alt="avatar" />
								<div class="up_img_d" v-if="!vehIng_one">
									<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
								</div>
							</a-upload>
							<a-upload v-decorator="['upload1']" name="file" listType="picture-card" class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
								<div class="img_zz" v-if="vehIng_two">
									<div class="img_zz_text">
										<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
									</div>
									<div class="img_zz_d"></div>
								</div>
								<img v-if="vehIng_two" :src="vehIng_two" alt="avatar" />
								<div class="up_img_d" v-if="!vehIng_two">
									<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
								</div>
							</a-upload>
							<a-upload v-decorator="['upload2']" name="file" listType="picture-card" class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
								<div class="img_zz" v-if="vehIng_three">
									<div class="img_zz_text">
										<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
									</div>
									<div class="img_zz_d"></div>
								</div>
								<img v-if="vehIng_three" :src="vehIng_three" alt="avatar" />
								<div class="up_img_d" v-if="!vehIng_three">
									<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
								</div>
							</a-upload>
							<a-upload v-decorator="['upload3']" name="file" listType="picture-card" class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
								<div class="img_zz" v-if="vehIng_four">
									<div class="img_zz_text">
										<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
									</div>
									<div class="img_zz_d"></div>
								</div>
								<img v-if="vehIng_four" :src="vehIng_four" alt="avatar" />
								<div class="up_img_d" v-if="!vehIng_four">
									<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
								</div>
							</a-upload>
						</a-form-item>
						<a-form-item label="货物名称" :label-col="{lg: { span: 24}, xl: { span: 2,}}" :wrapper-col="{lg: { span: 24}, xl: { span: 21}}">
							<a-input style="width: 10%;" v-decorator="[ 'cargoName', {rules: [{ required: true, message: '货物名称不能为空!' }]}]" />
							<a-select style="width: 10%;margin-left: 10px;"  placeholder="货物类型" v-decorator="[ 'cargoCategoryKey']">
								<a-select-option :value="item.dictKey" v-for="(item,index) in goodsType" key='index'>
									{{item.dictValue}}
								</a-select-option>
							</a-select>
							<span style="margin-left: 10px;">货物类型：</span>
							<a-select  v-decorator="[ 'cargoType', {initialValue: '1'}]"  style="width: 10%">
								<a-select-option value="1"> 重货 </a-select-option>
								<a-select-option value="2"> 轻货</a-select-option>
							</a-select>
							<span style="margin-left: 10px;" >预估重量：</span>
							<a-input style="width: 5%;" v-decorator="['weight']"/>
							<a-select  v-decorator="[ 'weightUnit', {initialValue: '公斤'}]" style="width: 80px;margin-left: 10px;">
								<a-select-option value="公斤"> 公斤 </a-select-option>
								<a-select-option value="吨"> 吨 </a-select-option>
							</a-select>
							<span style="margin-left: 10px;">预估体积：</span>
							<a-input style="width: 5%;" v-decorator="['volume']" />
							<span style="margin-left: 10px;">立方米</span>
							<span style="margin-left: 10px;">数量：</span>
							<a-input style="width: 5%;" v-decorator="['totalNums']"/> 
							<span style="margin-left: 10px;">件</span>
						</a-form-item>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 20px; " />
				<div class="route_choice">
					<p>
						<b>需求说明</b>
					</p>
					<a-form-item label="车辆需求" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
						<a-select style="width: 20%;"  v-decorator="[ 'carLengthKey' , {rules: [{ required: true, message: '请选择车长！' }]}]"  placeholder="请选择车长">
							<a-select-option :value="item.dictKey" v-for='(item,index)  in Conductor' key="index">
								{{item.dictValue}}
							</a-select-option>
						</a-select>
						<a-select  style="width: 20%;margin-left: 10px;" v-decorator="[ 'selectCarKey', {rules: [{ required: true, message: '选择车辆类型！' }]}]"  placeholder="选择车辆类型">
							<a-select-option :value="item.dictKey" v-for="(item,index) in vehicleType" key="index">
								{{item.dictValue}}
							</a-select-option>
						</a-select>
						<span style="margin-left: 10px;">（填写车辆需求信息，为您精准匹配相关车源。）</span>
					</a-form-item>
					<a-form-item label="期望运价" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
						<a-input style="width: 20%;"  v-decorator="['expectPrice']" />
						<span style="margin-left: 10px;">元    &nbsp; （填写期望运价，为您精准匹配车源信息，如不填写，默认显示为“面议”）</span>
					</a-form-item>
					<a-form-item label="有效期" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
						<a-input style="width:20%;"  v-decorator="['validDay']" />&nbsp;&nbsp;天
						<a-checkbox style="margin-left: 10px;" v-decorator="['longCargo']">长期货源</a-checkbox>
					</a-form-item>
					<a-form-item label="说明" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
						<a-textarea  style="width: 80%;" v-decorator="['remark']" :rows="3" />
					</a-form-item>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 20px; " />
				<div class="route_choice">
					<p><b>联系方式</b></p>
					<a-row>
						<a-col :span="8">
							<a-form-item label="发货人" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input v-decorator="['sendPerson', {rules: [{ required: true, message: '发货人不能为空！' }]}]" />
							</a-form-item>
							<a-form-item label="收货人" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input v-decorator="['receivePerson']" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="发货人手机" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
								<a-input v-decorator="['sendMobile', {rules: [{ required: true, message: '发货人手机不能为空！' }]}]" />
							</a-form-item>
							<a-form-item label="收货人手机" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
								<a-input v-decorator="['receiveMobile']" />
							</a-form-item>
						</a-col>
						<!--<a-col :span="8">
							<a-form-item>
								<a-button type="primary" @click="openPersonnelList('0')">选择常用发货人</a-button>
								<a-checkbox style="margin-left: 10px;" v-model='addDeliver'>保存到常用发货人</a-checkbox>
							</a-form-item>
							<a-form-item>
								<a-button type="primary" @click="openPersonnelList('1')">选择常用收货人</a-button>
								<a-checkbox style="margin-left: 10px;" v-model="addReceiving">保存到常用收货人</a-checkbox>
							</a-form-item>
						</a-col>-->
					</a-row>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 20px; " />
				<div class="ant-row ant-form-item">
					<div class="ant-col-1 ant-form-item-label"></div>
					<div class="ant-col-22 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
								<a-checkbox v-model='agreement'>
									<!--本人保证: 以上填写内容和材料附件真实无误，若填写或提供任何错误、不实或不完整的资料导致发生任何经济及法律纠纷， 本人愿承担一切责任！-->
									我已阅读并接受<a href="JavaScript:;">《云南国际物流云用户协议》</a><a href="JavaScript:;">《用户信息发布协议》</a>
								</a-checkbox>
							</span>
						</div>
					</div>
				</div>
				<div class="ant-row ant-form-item">
					<div class="ant-col-1 ant-form-item-label"></div>
					<div class="ant-col-10 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
								<a-button type="primary"  :disabled="!agreement" html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
									立即发布
								</a-button>
							</span>
						</div>
					</div>
				</div>
			</div>
		</a-form>
		<!--选择常用发货人-->
		<personnel-list ref="PersonnelDialog" @PersonnelData="getPersonnelData"></personnel-list>
		<!--地图Svg显示位置-->
		<map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
	</div>
</template>
<script>
	import PersonnelList from '@/components/dialog/PersonnelList'
	import MapSvg from '@/components/dialog/MapSvg'
	import { environment } from '@/environments/environment'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				agreement:false,
				goodsType:[],// 货物类型
				vehicleType:[],// 车辆类型
				Conductor:[],// 车长
				vehIng_one:'',
				vehIng_two:'',
				vehIng_three:'',
				vehIng_four:'',
				
				fileList: [],
				previewImage:'',
				loading:false,
				previewVisible:false,
				uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
				
				// 地图存起止数据
				departureData: {},
				destinationData: {},
				distance:'',
				
				addDeliver:true,
				addReceiving:true,
				
				form: this.$form.createForm(this),
			}
		},
		computed: {},
		beforeCreate() {},
		created() {
			console.log(this.detail,'asjd2')
			// 获取编辑的信息
			if(this.detail){
				this.getinfo()
			}
			this.getType(2)
			this.getType(5)
			this.getType(7)
		},
		components: {
			// Footer
			PersonnelList,
			MapSvg
		},
		watch: {},

		mounted: function() {

		},
		props: {
			detail:{}
		},
		methods: {
			// 获取编辑的信息
			getinfo(){
				this.$get('/info/infoCargomaster/getCargosmasterById/'+this.detail.cargoId).then((r) => {
					console.log('货物信息：',r)
					let data = r.data.data
					this.form.setFieldsValue({
						fromCity:data.fromCity,
						toCity:data.toCity,
						fromStreet:data.fromStreet,
						toStreet:data.toStreet,
						sendPerson:data.sendPerson,
						receivePerson:data.receivePerson,
						sendMobile:data.sendMobile,
						receiveMobile:data.receiveMobile,
						cargoName:data.cargos[0].cargoName,
						cargoCategoryKey:data.cargos[0].cargoCategoryKey,
						cargoType:data.cargos[0].cargoType,
						totalNums:data.cargos[0].totalNums,
						volume:data.cargos[0].volume,
						weight:data.cargos[0].weight,
						volume :data.cargos[0].volume,
						remark:data.remark,
						expectPrice:data.expectPrice,
						carLengthKey:data.carLengthKey,
						selectCarKey:data.selectCarKey,
						longCargo:data.longCargo,
						validDay:data.validDay,
					});
					console.log(this.huowuArray)
//					for(let i in data.cargos){
//						this.huowuArray[i].fileList = data.cargos[i].cargoPics.split(',')
//					}
					console.log(this.huowuArray,89899999999999999999999999)
					
				})
				.catch((e) => {
					console.log(e)
				})
			},
			// 获取车辆类型
			getType(type){
				let params = {}
				params.dictType = type
				this.$get('/info/commonDict', params).then((r) => {
					this.loading = false
					console.log('车辆222类型：',r)
					if(type == 2){
						this.goodsType = r.data.data.rows
					}
					if(type == 5){
						this.vehicleType = r.data.data.rows
					}
					if(type == 7){
						this.Conductor = r.data.data.rows
					}
				})
			},
			add(){
				if(this.form.getFieldValue('upload')){
					this.getBase64(this.form.getFieldValue('upload').file.originFileObj, (imageUrl) => {
			          this.vehIng_one = imageUrl
			          this.loading = false
			        })
				}
				if(this.form.getFieldValue('upload1')){
					this.getBase64(this.form.getFieldValue('upload1').file.originFileObj, (imageUrl) => {
			          this.vehIng_two = imageUrl
			          this.loading = false
			        })
				}
				if(this.form.getFieldValue('upload2')){
					this.getBase64(this.form.getFieldValue('upload2').file.originFileObj, (imageUrl) => {
			          this.vehIng_three = imageUrl
			          this.loading = false
			        })
				}
				if(this.form.getFieldValue('upload3')){
					this.getBase64(this.form.getFieldValue('upload3').file.originFileObj, (imageUrl) => {
			          this.vehIng_four = imageUrl
			          this.loading = false
			        })
				}
			},
			getBase64 (img, callback) {
			  const reader = new FileReader()
			  reader.addEventListener('load', () => callback(reader.result))
			  reader.readAsDataURL(img)
			},
			// 上传货物图片
			Positive_Change(info) {
//				console.log(info, 9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
//					this.Positive_img = info.file.response.data.certifJpgFile
//					this.certificatesjpg = info.file.response.data.certificatesjpg
//					this.certificatesPath = info.file.response.data.certificatesPath
					this.loading = false
					this.add()
				}
			},
			// 上传图片前事件处理
			beforeUpload(file) {
				console.log(file.type)
				const isJPG = file.type === 'image/jpeg' || 'image/png'
				if(!isJPG) {
					this.$message.error('You can only upload JPG file!')
				}
				const isLt2M = file.size / 1024 / 1024 < 2
				if(!isLt2M) {
					this.$message.error('Image must smaller than 2MB!')
				}
				return isJPG && isLt2M
			},
			// 省市地图回调
			mapSvgCall(d) {
				if (d.name === 'departure') {
					this.form.setFieldsValue({
						fromCity: d.provCityArea
					});
					this.departureData = Object.assign({}, d);
					console.log(this.departureData, 898888)
				}
				if (d.name === 'destination') {
					this.form.setFieldsValue({
						toCity: d.provCityArea
					});
					this.destinationData = Object.assign({}, d);
				}
				if (d.name === 'departureStreet') {
					this.form.setFieldsValue({
						fromStreet: d.address
					});
				}
				if (d.name === 'destinationStreet') {
					this.form.setFieldsValue({
						toStreet: d.address
					});
				}
				//				this[d.name] = d.address;
				this.getDistanceCount();
			},
			// 选择出发地
			departureShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
			},
			// 选择到达地
			destinationShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('destination', 2, '', '', '');
			},
			// 选择出发地街道/门牌号
			getdepartureStreet(){
//				this.$refs.mapSvgDialog.mapSvgVisible( 'departureStreet',3,'北京市','通州区','市辖区' );
				this.$refs.mapSvgDialog.mapSvgVisible( 'departureStreet',3,this.departureData.province,this.departureData.city,this.departureData.area );
			},
			// 选择到达地街道/门牌号
			getdestinationStreet(){
//				this.$refs.mapSvgDialog.mapSvgVisible( 'departureStreet',3,'北京市','通州区','市辖区' );
				this.$refs.mapSvgDialog.mapSvgVisible( 'destinationStreet',3,this.destinationData.province,this.destinationData.city,this.destinationData.area );
			},
			// 起运地到目的地的距离
			getDistanceCount() {
				if(this.departureData.point && this.destinationData.point) {
					this.$refs.mapSvgDialog.distanceCount(this.departureData.point, this.destinationData.point);
				}
			},
			// 调用距离返回
			distanceCall(num) {
				console.log(num)
				this.distance = num
//				 this.form.setFieldsValue({ juliNum: num });
			},
			getMap() {

			},
			// 选择常用发货人选择信息
			getPersonnelData(data,type) {
				console.log(data)
				console.log(type)
				if(type == 0){
					this.form.setFieldsValue({
						sendPerson: data.name,
						sendMobile: data.Telephone,
					});
				}
				if(type == 1){
					this.form.setFieldsValue({
						receivePerson: data.name,
						receiveMobile: data.Telephone,
					});
				}
			},
			// 选择常用发货人打开
			openPersonnelList(type) {
				this.$refs.PersonnelDialog.openDialog(type)
			},
			// 提交保存
			handleSubmit(e) {
//				console.log(this.fileList)
				if(this.loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						// this.loading = true
						let cargopics = ''
//						for(let i in this.fileList){
//							cargopics += this.fileList[i].response.data.certifJpgFile+','							
//						}
						if(values.upload){
							cargopics += values.upload.file.response.data.certifJpgFile+','							
						}
						if(values.upload1){
							cargopics += values.upload.file.response.data.certifJpgFile+','							
						}
						if(values.upload2){
							cargopics += values.upload.file.response.data.certifJpgFile+','							
						}
						if(values.upload3){
							cargopics += values.upload.file.response.data.certifJpgFile+','							
						}
//						console.log(cargopics)
						values.cargos = [{
							"cargoPics":cargopics,
							"cargoName":this.form.getFieldValue('cargoName'),
							"cargoCategoryKey":this.form.getFieldValue('cargoCategoryKey'),
							"totalNums":this.form.getFieldValue('totalNums'),
							"weight":this.form.getFieldValue('weight'),
							"weightUnit":this.form.getFieldValue('weightUnit'),
							"cargoType":this.form.getFieldValue('cargoType'),
							"volume":this.form.getFieldValue('volume'),
						}]
						
						values.type  = 2
						values.linkmen = []
						if(this.addDeliver == true){
							values.linkmen.push({
								  "sendPerson": this.form.getFieldValue('sendPerson'),
								  "sendPersonMobile": this.form.getFieldValue('sendMobile'),
								  "type": 0,
								  "userId": this.user.userId
							})
						}
						if(this.addReceiving == true){
							values.linkmen.push({
								  "receivePersion": this.form.getFieldValue('receivePerson'),
								  "receivePersonMobile": this.form.getFieldValue('receiveMobile'),
								  "type": 1,
								  "userId": this.user.userId
							})
						}
						console.log('Received values of form: ', values);
						this.$post('/info/infoCargomaster', values,true).then((r) => {
							console.log(r,8989)
							if(r.status == 200){
								this.$notification.success({
								  message: r.data.message,
								});
								this.form.resetFields();
							}
							this.loading = false;
						}).catch((e) => {
							console.log(e)
							this.loading = false;
						})
					}
				});
			},
		},
		computed: {
			...mapState({
				multipage: state => state.setting.multipage,
				user: state => state.account.user,
			}),
		},
	}
</script>

<style lang="less">
	.supply-longDistance {
		.route {
			.route_text {
				font-size: 12px;
				padding: 0px 30px;
				margin: 0;
			}
			.route_choice {
				width: 100%;
				padding: 10px 30px;
				margin-top: 10px;
				.upzjimg {
					.ant-upload {
						padding: 0;
					}
					.ant-upload-list-picture-card .ant-upload-list-item {
						width: 80px;
						height: 80px;
					}
					.ant-upload.ant-upload-select-picture-card {
						border: 1px solid #DDDDDD;
					}
					.up_img {
						float: left;
						position: relative;
						.ant-upload.ant-upload-select-picture-card {
							width: 80px;
							height: 80px;
						}
						img {
							width: 80px;
							height: 80px;
						}
						.up_img_d {
							color: #DDDDDD;
							width: 80px;
							height: 80px;
							padding-top: 28px;
						}
						.img_zz {
							width: 80px;
							height: 80px;
							position: absolute;
							color: #fff;
							.img_zz_text {
								position: absolute;
								z-index: 10;
								padding-top: 28px;
								padding-left: 28px;
							}
							.img_zz_d {
								position: absolute;
								width: 80px;
								height: 80px;
								background: #000;
								opacity: 0.6;
							}
						}
					}
				}
				.choice-left{
					position: relative;
					.distance{
						position: absolute;
						width: 100px;
						height: 100px;
						left:350px;
						text-align: right;
						.border-top{
							width: 60px;
							height: 20px;
							border-top: 1px solid;
							border-right: 1px solid;
							margin-top: 20px;
						}
						.border-bottom{
							width: 60px;
							height: 20px;
							border-bottom: 1px solid;
							border-right: 1px solid;
						}
					}
				}
			}
			.route_but{
				width: 100%;
				border: 1px solid #eee;
				padding: 10px 30px;
				margin-top: 10px;
				text-align: center;
			}
		}
	}
</style>